<template>
	<view>
		<view class="address-window" :class="address==true?'on':''">
			<view class='title'>分享至 <view class="iconfont"><u-icon name="close" color="#888" size="20" @click='close'></u-icon></view></view>
			<view class='list flex-all'>
				<view class="imgwrap" @click="toJump('/pages/hall/privateLetter?article='+JSON.stringify(article))"><image src="/static/imgs/fx1.png" mode="widthFix"/><view>私信好友</view></view>
				<view class="imgwrap"><image src="/static/imgs/fx2.png" mode="widthFix"/><view>微信好友</view></view>
				<view class="imgwrap"><image src="/static/imgs/fx3.png" mode="widthFix"/><view>朋友圈</view></view>
				<view class="imgwrap"><image src="/static/imgs/fx4.png" mode="widthFix"/><view>生成分享图</view></view>
				<view class="imgwrap"><image src="/static/imgs/fx5.png" mode="widthFix"/><view>QQ分享</view></view>
			</view>

      <view class='list flex-all' style="justify-content: flex-start;borderTop:1px solid #eee;" v-if="show">
				<view class="imgwrap"><image src="/static/imgs/bj1.png" mode="widthFix"/><view>编辑</view></view>
				<view class="imgwrap"><image src="/static/imgs/bj2.png" mode="widthFix"/><view>时间锁</view></view>
				<view class="imgwrap"><image src="/static/imgs/bj3.png" mode="widthFix"/><view>移动</view></view>
			</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='address==false' @click='close'></view>
	</view>
</template>

<script>
	export default {
		props: {
			address: {
				type: Boolean,
				default: false,
			},
			show:{
				type: Boolean,
				default: false,
			},
			article:Object 
		},
		data() {
			return {
				
			};
		},
		created() {
			console.log(this.article);
		},
		methods: {
			close: function() {
				this.$emit('changeClose');
			},
      toJump(url) {
        if (!url) return
        uni.navigateTo({url});
      },
		}
	}
</script>

<style scoped lang="scss">
	.address-window {
		background-color: #f6f6f6;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 101;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
    border-radius:30rpx 30rpx 0 0;
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}

	.address-window .title {
		font-size: 28rpx;
		text-align: center;
		height: 100rpx;
    color: $uni-text-color-placeholder;
		line-height: 100rpx;
		position: relative;
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 30rpx;
    top:50%;
    transform: translate(0,-50%);
	}
  .address-window .list {
    padding:50rpx 0;
  }

	.address-window .list .imgwrap {
		width:20%;
    text-align: center;
	}

	.address-window .list .imgwrap image {
		width:90rpx;
	}

  .address-window .list .imgwrap view {
		font-size: 24rpx;
    color: $uni-text-color;
    margin-top: 20rpx;
	}
</style>
